<template>
  <view class="Tabs">
    <view
      v-for="(item, index) of list"
      :key="index"
      @click="() => itemClick(index)"
      :class="{ TabItem: true, TabItemSelected: index === current }"
    >
      {{ labelName ? item[labelName] : item }}
    </view>
  </view>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import { PropType } from 'vue';

interface IData {}

export default Vue.extend({
  data(): IData {
    return {};
  },
  components: {},
  props: {
    labelName: {
      type: String,
      default: 'label',
    },
    list: Array as PropType<any[]>,
    current: Number,
  },
  methods: {
    itemClick(index: number) {
      this.$emit('change', index);
    },
  },
});
</script>
<style lang="less" scoped>
.Tabs {
  display: flex;
  overflow: auto;
  margin-bottom: 10px;
  .TabItem {
    padding: 10px 20px;
    position: relative;
    &:after {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      width: 0;
      height: 3px;
      border-radius: 100px;
      transition: all 0.3s;
    }
  }

  .TabItemSelected {
    &:after {
      width: 30%;
      background: #5692ee;
    }
  }
}
</style>
